import {Navigate, Route, Routes} from "react-router-dom"

import HomePage from "./pages/home/HomePage"
import LoginPage from "./pages/auth/login/LoginPage"
import SignUpPage from "./pages/auth/signup/SignUpPage"
import NotificationPage from "./pages/notification/NotificationPage"
import ProfilePage from "./pages/profile/ProfilePage"

import Sidebar from "./components/common/Sidebar"
import RightPanel from "./components/common/RightPanel"

import {Toaster} from "react-hot-toast"
import {useQuery} from '@tanstack/react-query'
import LoadingSpinner from "./components/common/LoadingSpinner"

// TODO: handle App comp
const App = () => {
    const {data: authUser, isLaoding} = useQuery({
        // we use queryKey to give an unique name to our query and refer to it later
        queryKey: ["authUser"],
        queryFn: async () => {
            try {
                const res = await fetch("/api/auth/me")
                const data = await res.json()
                if (data.error) return null
                if (!res.ok) {
                    throw new Error(data.error || "Something went wrong")
                }
                console.log("authUser is here: ", data)
                return data
            }catch(error) {
                throw new Error(`Error in ${__filename}: ` + error)
            }
        },
        retry: false
    })

    if (isLaoding) {
        return (
            <div className="h-screen flex justify-center items-center">
                <LoadingSpinner size='lg'/>
            </div>
        )
    }

    // TODO: fix this comp
    return (
        <div>
            
        </div>
    )
}

export default App;